<template>
	<view class="group_11">
		<view class="group_28">
			<image class="image_3" :src="app_url + 'image/zuxiang.png'" />
			<view lines="1" decode="true" class="text-wrapper_11">
				<text class="text_31">话费更少的钱&nbsp;体验品质生活</text>
			</view>
		</view>
		<view class="group_29">
			<view class="group_30">
				<view class="block_7" @click="gotoDetail(44)">
					<image :src="app_url + 'image/jiaqi.png'" class="background-image"></image>
					<view class="text-group_21">
						<text lines="1" class="text_32">假期出游</text>
						<text lines="1" decode="true" class="text_33">轻松拍摄&nbsp;记录生活</text>
					</view>
					<view class="block_8">
						<text lines="1" class="text_34">3天起租</text>
						<!-- <image src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0bf047f7a14f20133d96974b118604e55f37007329e97481ad0e41f6d0970641" class="thumbnail_6"></image> -->
					</view>
				</view>
				<view class="block_9" @click="gotoDetail(102)">
					<image :src="app_url + 'image/zhaijia.png'" class="background-image"></image>
					<view class="text-group_22">
						<text lines="1" class="text_35">宅家娱乐</text>
						<text lines="1" decode="true" class="text_36">高配电竞&nbsp;畅玩游戏</text>
					</view>
					<view class="group_15">
						<text lines="1" class="text_37">7天起租</text>
						<!-- 			              <image src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0bf047f7a14f20133d96974b118604e55f37007329e97481ad0e41f6d0970641" class="thumbnail_7"></image> -->
					</view>
				</view>
			</view>
			<view class="group_16" @click="gotoDetail">
				<image :src="app_url + 'image/chaowan.png'" class="background-image"></image>
				<view class="image-text_13">
					<view class="text-group_23">
						<text lines="1" class="text_38">潮玩种草新纪元</text>
					</view>
				</view>
				<view class="group_17">
					<text lines="1" class="text_39">3天起租</text>
					<!-- 			            <image src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0bf047f7a14f20133d96974b118604e55f37007329e97481ad0e41f6d0970641" class="thumbnail_8"></image> -->
				</view>
			</view>
			<view class="group_31">
				<view class="section_1" @click="gotoDetail(236)">
					<image :src="app_url + 'image/zhineng.png'" class="background-image"></image>
					<view class="text-group_24">
						<text lines="1" class="text_40">智联家电</text>
						<text lines="1" decode="true" class="text_41">智能趋势&nbsp;居家生活</text>
					</view>
					<view class="box_8">
						<text lines="1" class="text_42">30天起租</text>
						<!-- 			              <image src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0bf047f7a14f20133d96974b118604e55f37007329e97481ad0e41f6d0970641" class="thumbnail_9"></image> -->
					</view>
				</view>
				<view class="section_2" @click="gotoDetail(237)">
					<image :src="app_url + 'image/yundong.png'" class="background-image"></image>
					<view class="text-group_25">
						<text lines="1" class="text_43">运动健身</text>
						<text lines="1" decode="true" class="text_44">夏季燃脂&nbsp;全民健身</text>
					</view>
					<view class="section_3">
						<text lines="1" class="text_45">30天起租</text>
						<!-- 			              <image src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0bf047f7a14f20133d96974b118604e55f37007329e97481ad0e41f6d0970641" class="thumbnail_10"></image> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/config.js";
	export default {
		name: "AdSign",
		props: {},
		data() {
			return {
				app_url: config.app_url,
			};
		},
		methods: {
			gotoDetail(catid) {
				let url = "pages/product/list/list?category_id=" + catid;
				this.gotoPage(url);
			}
		},
		created() {},
	};
</script>

<style lang="scss" scoped>
	.group_11 {
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
		height: 492rpx;
		width: 710rpx;
		display: flex;
		flex-direction: column;
		margin: 20rpx 0;
	}

	.group_28 {
		width: 442rpx;
		height: 32rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 22rpx 0 0 22rpx;
	}

	.image_3 {
		width: 134rpx;
		height: 32rpx;
	}

	.text-wrapper_11 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: NaNrpx;
		height: 32rpx;
		border: 0.5px solid rgba(233, 233, 233, 1);
		display: flex;
		flex-direction: column;
		width: 272rpx;
	}

	.text_31 {
		width: 248rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(123, 124, 125, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 6rpx 0 0 12rpx;
	}

	.group_29 {
		width: 654rpx;
		height: 388rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 34rpx 0 16rpx 24rpx;
	}

	.group_30 {
		width: 204rpx;
		height: 388rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.block_7 {
		border-radius: 16rpx;
		width: 204rpx;
		height: 184rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;
	}

	.background-image {
		width: 100%;
		/* 或者 '204rpx' 如果你想要固定大小 */
		height: 100%;
		/* 或者 '184rpx' 如果你想要固定大小 */
		border-radius: 16rpx;
		/* 如果你想要圆角 */
		position: absolute;
		/* 如果你使用了相对定位 */
		top: 0;
		left: 0;
		z-index: 0;
		/* 确保图片在内容下方 */
	}

	.text-group_21 {
		z-index: 1;
		width: 168rpx;
		height: 64rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text_32 {
		width: 104rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(55, 52, 52, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
	}

	.text_33 {
		width: 168rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(123, 124, 125, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin-top: 18rpx;
	}

	.block_8 {
		z-index: 1;
		width: 104rpx;
		height: 32rpx;
		/*  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng5ec55d331f4eac2febd1452f2939a6e76d9854fd7e676901e346ac668c2e7f7d) 100% no-repeat */
		background-size: 100% 100%;
		margin-left: 20rpx;
		flex-direction: row;
		display: flex;
	}

	.text_34 {
		width: 72rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 6rpx 0 0 12rpx;
	}

	.thumbnail_6 {
		width: 6rpx;
		height: 8rpx;
		margin: 12rpx 6rpx 0 8rpx;
	}

	.block_9 {
		border-radius: 16rpx;
		width: 204rpx;
		height: 184rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;
	}

	.text-group_22 {
		width: 168rpx;
		height: 64rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		z-index: 1;
	}

	.text_35 {
		width: 104rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(55, 52, 52, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
	}

	.text_36 {
		width: 168rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(123, 124, 125, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin-top: 18rpx;
	}

	.group_15 {
		width: 40rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 10rpx 0 0 4rpx;
		z-index: 1;
	}

	.text_37 {
		width: 72rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 6rpx 0 0 12rpx;
	}

	.thumbnail_7 {
		width: 6rpx;
		height: 8rpx;
		margin: 12rpx 6rpx 0 8rpx;
	}

	.group_16 {
		border-radius: 16rpx;
		width: 204rpx;
		height: 388rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;
	}

	.image-text_13 {
		width: 164rpx;
		height: 312rpx;
		flex-direction: row;
		display: flex;
		margin: 20rpx 0 0 28rpx;
		z-index: 1;
	}

	.text-group_23 {
		width: 164rpx;
		height: 312rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text_38 {
		width: 140rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(67, 62, 180, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 290rpx 0 0 12rpx;
	}

	.image_4 {
		width: 158rpx;
		height: 166rpx;
		margin: 118rpx 4rpx 0 -162rpx;
	}

	.group_17 {
		width: 112rpx;
		height: 32rpx;
		/*  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc2dc666c7405e52664c8af78ce78c115276f6054e498dedf409a85fed561b64b) 100% no-repeat */
		background-size: 100% 100%;
		margin-left: 12rpx;
		flex-direction: row;
		display: flex;
		z-index: 1;
	}

	.text_39 {
		width: 72rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 6rpx 0 0 50rpx;
	}

	.thumbnail_8 {
		width: 6rpx;
		height: 8rpx;
		margin: 12rpx 8rpx 0 6rpx;
	}

	.group_31 {
		width: 204rpx;
		height: 388rpx;
		margin-left: 0rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.section_1 {
		border-radius: 16rpx;
		width: 204rpx;
		height: 184rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;
	}

	.text-group_24 {
		width: 168rpx;
		height: 64rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		z-index: 1;
	}

	.text_40 {
		width: 104rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(55, 52, 52, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
	}

	.text_41 {
		width: 168rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(123, 124, 125, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin-top: 18rpx;
	}

	.box_8 {
		width: 112rpx;
		height: 32rpx;
		/*  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc2dc666c7405e52664c8af78ce78c115276f6054e498dedf409a85fed561b64b) 100% no-repeat */
		background-size: 100% 100%;
		margin-left: 12rpx;
		flex-direction: row;
		display: flex;
		z-index: 1;
	}

	.text_42 {
		width: 84rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 6rpx 0 0 14rpx;
	}

	.thumbnail_9 {
		width: 6rpx;
		height: 8rpx;
		margin: 12rpx 8rpx 0 0;
	}

	.section_2 {
		border-radius: 16rpx;
		width: 204rpx;
		height: 184rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;
	}

	.text-group_25 {
		z-index: 1;
		width: 168rpx;
		height: 64rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text_43 {
		width: 104rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(55, 52, 52, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
	}

	.text_44 {
		width: 168rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(123, 124, 125, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin-top: 18rpx;
	}

	.section_3 {
		z-index: 1;
		width: 112rpx;
		height: 32rpx;
		/*  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng17c1637ece4507693b3595800533d34db3cd41c581ba44f187e29ba5272bd28f) 100% no-repeat */
		background-size: 100% 100%;
		margin-left: 12rpx;
		flex-direction: row;
		display: flex;
	}

	.text_45 {
		width: 84rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 6rpx 0 0 12rpx;
	}
</style>